<template>
	<view class="wrap">
		<view class="tips">
			<view>姓名一旦保存，无法再次更改</view>
			<view>请仔细核对</view>

		</view>
		
		<view class="ipt-wrap">
			<view class="label">
				姓名
			</view>
			<view class="right">
				 <input v-model="name"  type="text" placeholder="请输入姓名" />
			</view>
			
		</view>
		<view class="ipt-wrap">
			<view class="label">
				账号
			</view>
			<view class="right">
				 <input v-model="account"  type="text" placeholder="请输入账号" />
			</view>
			
		</view>
		<view class="ipt-wrap-">
			<view style="margin-bottom:16rpx">
				添加收款二维码
			</view>
			<image @click="chooseImg" class="img-pic" :src="qrcode" mode=""></image>
			
		</view>
		
		<view class="next" @click="topay">
			保存
		</view>
		<paypass ref="yspay" @cancel="cancelpay" @submit="submitpay"></paypass>
		
	</view>
</template>


<script>
	import paypass from "@/components/ys-paypass/ys-paypass.vue";
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components:{tkiQrcode,paypass},
		data() {
			return {
				account:'',
				hasurl:false,
				qrcode:require('../../static/imgpic.png'),
				btntip: '获取验证码',
				name:'',
				timer:null,
				time:59,
				code:'',
				money_pwd:'',
				repeat_money_pwd:''
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			topay(){
				
				
				if(this.name==''){
					uni.showToast({
					    title: '请输入姓名',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(this.account==''){
					uni.showToast({
					    title: '请输入账号',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(!this.hasurl){
					uni.showToast({
					    title: '请上传二维码',
					    duration:4000,
						icon:'none'
					});
					return
				}
				
				this.$refs.yspay.show();
			},
			
			submitpay(ex){
				this.subData(ex.value)
			},
			chooseImg(){
				
				let that=this
				
				uni.chooseImage({
					count:1,
					sizeType:'compressed',
					success: (res) => {
						const imgsFile=res.tempFilePaths
						uni.showLoading({
						    title: '正在上传图片'
						});
						const uper=uni.uploadFile({
							url: that.upUrl+'/api/user/up_ali_qrcode',
							filePath:imgsFile[0],
							name:'img',
							header:{  
								"Authorization": uni.getStorageSync("auth_token")
							},
							success:function(res){
								
								
								let data=JSON.parse(res.data)
								if(data.Code=='10200'){
									
									uni.showToast({
										title: "上传成功",
										icon: "none",
										duration:4000,
									});
									uni.hideLoading();
									that.qrcode=data.Data
									that.hasurl=true
									
									
								}
							}
						})
						//上传进度更新的方法
						// uper.onProgressUpdate((e)=>{
						// 	if(e.progress==100){
								
								
						// 	}else{
								
						// 	}
							
						// })
					}
				})
			
			},
			subData(pwd){
				let that=this
				that.apipost('/api/user/change_alipay_info',{
					pwd:pwd,
					account:that.account,
					qrcode:that.qrcode,
					name:that.name
				},true).then(res => {
					if(res.Code==10200){
						
						uni.showToast({
						    title: res.Message,
						    duration:4000,
							icon:'none'
						});
						
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			getData(){
				let that=this
				
				
				
				that.apiget('/api/user/get_alipay_info').then(res => {
					if(res.Code==10200){
						let data=res.Data
						that.name=data.name
						that.account=data.account
						if(data.qrcode){
							that.qrcode=data.qrcode
							that.hasurl=true
						}
						
						
					}
					
				}).catch(err=>{
					console.log(err)
				});
			}
		}
	}
</script>

<style>
	.img-pic{
		border-radius: 10rpx;
		width: 216rpx;
		height:216rpx;
	}
	.forget{
		display:flex;
		justify-content: flex-end;
		padding-top:20rpx;
		color:#1380db;
		width:668rpx;
		margin:0 auto;
	}
	.next{
		
		background:#f9436b;
		color:#fff;
		width:668rpx;
		margin:0 auto;
		display:flex;
		justify-content: center;
		align-items: center;
		height:80rpx;
		margin-top:60rpx;
		border-radius:12rpx;
	}
	.ipt-wrap .label{
		width:140rpx;
	}
	.ipt-wrap .right{
		flex:1;
	}
	.right input{
		height:100%;
	}
	.ipt-wrap{
		display:flex;
		align-items: center;
		width:604rpx;
		margin:0 auto;
		margin-top:30rpx;
		padding:26rpx 0;
		border-bottom:1rpx solid #e8e8e8
	}
	.ipt-wrap-{
		
		width:604rpx;
		margin:0 auto;
		margin-top:30rpx;
		padding:26rpx 0;
		border-bottom:1rpx solid #e8e8e8
	}
	/* .name-wrap{
		border-bottom:1rpx solid #e8e8e8
	} */
	.wrap{
		background:#fff;
		min-height:100%;
	}
	.tips{
		color:#333;
		line-height:70rpx;
		background:#eeeeee;
		padding:34rpx 44rpx 34rpx 30rpx;
	}
</style>
